<template>
    <div class="main">
        <div class="head">
          <a @click="num=1,getData()" :class="{active:num==1}">未使用</a>
          <a @click="num=2,getData()" :class="{active:num==2}">已使用</a>
          <a @click="num=3,getData()" :class="{active:num==3}">已失效</a>
        </div>
        <ul v-if="num==1" class="unused">
          <li v-for="item in data">
            <router-link :to="{path:myUrl+'voucherdetail',query:{couponno:item.couponNo}}">
              <div class="left">
                <span>￥</span>{{item.remainPar}}
              </div>
              <div class="right">
                <p class="title">美丽田园{{item.name}}</p>
                <p class="date">有效期至: <span>{{item.availableDate.substr(0,10)}}</span></p>
              </div>
            </router-link>
          </li>
        </ul>
        <ul  v-if="num==2" class="used">
          <li v-for="item in data">
            <router-link :to="{path:myUrl+'voucherdetail',query:{couponno:item.couponNo}}">
              <div class="left">
                <span>￥</span>{{item.remainPar}}
              </div>
              <div class="right">
                <p>使用人: <span>{{item.username}}</span></p>
                <p>使用时间: <span>{{item.availableDate.substr(0,10)}}</span></p>
                <p>使用门店: <span>{{item.couponChannel}}</span></p>
              </div>
            </router-link>
          </li>
        </ul>
        <ul v-if="num==3" class="invalid" >
        <li v-for="item in data">
          <router-link :to="{path:myUrl+'voucherdetail',query:{couponno:item.couponNo}}">
            <div class="left">
              <span>￥</span>{{item.remainPar}}
            </div>
            <div class="right">
              <p class="title">美丽田园{{item.name}}</p>
              <p class="date">有效期至: <span>{{item.availableDate.substr(0,10)}}</span></p>
            </div>
          </router-link>
        </li>
      </ul>
      <div class="notfound" v-if="type==0">
        抱歉,没有更多数据了
      </div>
      <PulseLoader v-if="loading==true"  :size="size" :color="color"></PulseLoader>
    </div>
</template>

<script>
  import $ from "jQuery"
  import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
  import wx from 'weixin-js-sdk';
  import {
    baseUrl,auth,myUrl,
  } from "@/assets/public"
    export default {
        name: 'main',
        data() {
            return {
              num:1,
              data:"",
              loading:true,
              size:".5rem",
              color:"#333",
              shareTitle:"爱拼才美丽",
              lineLink:"",
              imgUrls:myUrl+"/static/img/share.png",
              descContent:"美颜·美体·健康",
              type:1,
			  myUrl:myUrl,
            }
        },
        created(){
            auth();
            this.lineLink =window.location.href;
        },
        mounted() {
          var that =this;
            $.ajax({
                type:"GET",
                url:baseUrl +"/api/cplist",
                dataType:"json",
                data:{
                  "openid":localStorage.openid,
                  "status":1
                },
                success:function (res) {
                  console.log(res);
                  that.data=res.data;
                  that.loading=false;
                  if(res.data.length == 0){
                    that.type = 0;
                  }
                }
            })
            this.wechatShare();

        },
        methods: {
          getData:function () {
            var that =this;
            $.ajax({
              type:"GET",
              url:baseUrl +"/api/cplist",
              dataType:"json",
              data:{
                "openid":localStorage.openid,
                "status":that.num
              },
              success:function (res) {
                console.log(res);
                that.type = 1;
                that.data=res.data;
                that.loading=false;
                if(res.data.length == 0){
                  that.type = 0;
                }
              }
            })
          },
          wechatShare(){
            let that = this;
            wx.ready(function (){
              wx.onMenuShareTimeline({
                title: that.shareTitle, // 分享标题
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户确认分享后执行的回调函数

                },
                cancel: function () {}
              });
              wx.onMenuShareAppMessage({
                title: that.shareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {

                },
                cancel: function () {}
              });
              wx.onMenuShareQQ({
                title: that.shareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户确认分享后执行的回调函数

                },
                cancel: function () {}
              });
              wx.onMenuShareWeibo({
                title: that.shareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户取消分享后执行的回调函数

                },
                cancel: function () {}
              });
              wx.onMenuShareQZone({
                title: that.shareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户取消分享后执行的回调函数

                },
                cancel: function () {}
              });
            })
          },

        },
        components:{
          PulseLoader,
        }
    }
</script>

<style scoped>
  .main {
    width: 100%;
    min-height:100vh;
    background: url("../../img/bg1.png") center center repeat;
  }
  .head {
    width: 80%;
    padding:0 10%;
    height:1.5rem;
    display: flex;
    justify-content: space-between;
    background: #ffffff;
  }
  .head a {
    width: 33.33%;
    height:1.5rem;
    line-height: 1.5rem;
    text-align: center;
    font-size:.36rem;
    color: #999;
    letter-spacing: 1px;
  }
  .active {
    color: #000000 !important;
    font-weight:bold;
  }
  ul.unused {
    width: 90%;
    height: auto;
    background: url("../../img/bg1.png") center center repeat;
    padding:0 5%;
    padding-bottom:.5rem;
    border-top: 1px solid #000000;
  }
  ul.unused li {
    width: 100%;
    height:2.3rem;
    background: url("../../img/diyong-4.png") center center no-repeat;
    background-size: cover;
    margin-top:.5rem;
  }
  @font-face {
    font-family: "pis";
    src: url("../../css/BanksScript.otf");
  }
  ul.unused li>a {
    display: flex;
  }
  ul.unused li .left {
    width: 45%;
    height:2.3rem;
    text-align: center;
    line-height:2.3rem;
    font-size:1.5rem;
    font-family: "pis";
    color: #666666;
  }
  ul.unused li .left span {
    font-size:.6rem;
    font-family: "pis";
    font-style: italic;
  }
  ul.unused li .right {
    width: 55%;
  }
  ul.unused li .right .title{
    width: 100%;
    text-align: center;
    color: #ffffff;
    height:.8rem;
    margin-top:.4rem;
    line-height:.8rem;
    font-size:.34rem;
    letter-spacing:1px;
  }
  ul.unused  li .right .date {
    text-align: center;
    color: #cacaca;
    letter-spacing:1px;
    font-size:.28rem;
  }



  ul.used {
    width: 90%;
    height: auto;
    background: url("../../img/bg1.png") center center repeat;
    padding:0 5%;
    padding-bottom:.5rem;
    border-top: 1px solid #000000;
  }
  ul.used li {
    width: 100%;
    height:2.3rem;
    background: url("../../img/diyong-3.png") center center no-repeat;
    background-size: cover;
    margin-top:.5rem;
  }
  @font-face {
    font-family: "pis";
    src: url("../../css/BanksScript.otf");
  }
  ul.used li>a {
    display: flex;
  }
  ul.used li .left {
    width: 45%;
    height:2.3rem;
    text-align: center;
    line-height:2.3rem;
    font-size:1.5rem;
    font-family: "pis";
    color: #d1d1d1;
  }
  ul.used li .left span {
    font-size:.6rem;
    font-family: "pis";
    font-style: italic;
  }
  ul.used li .right {
    width: 55%;
  }
  ul.used li .right p {
    margin-left:.3rem;
    color:#333;
    font-size:.3rem;
    line-height:.5rem;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;

  }
  ul.used li .right p:first-child {
    margin-top:.42rem;
  }


  ul.invalid {
    width: 90%;
    height: auto;
    background: url("../../img/bg1.png") center center repeat;
    padding:0 5%;
    padding-bottom:.5rem;
    border-top: 1px solid #000000;
  }
  ul.invalid li {
    width: 100%;
    height:2.3rem;
    background: url("../../img/diyong-3.png") center center no-repeat;
    background-size: cover;
    margin-top:.5rem;
  }
  ul.invalid  li>a {
    display: flex;
  }
  ul.invalid li .left {
    width: 45%;
    height:2.3rem;
    text-align: center;
    line-height:2.3rem;
    font-size:1.5rem;
    font-family: "pis";
    color: #d1d1d1;
  }
  ul.invalid  li .left span {
    font-size:.6rem;
    font-family: "pis";
    font-style: italic;
  }
  ul.invalid li .right {
    width: 55%;
  }
  ul.invalid li .right .title{
    width: 100%;
    text-align: center;
    color: #ffffff;
    height:.8rem;
    margin-top:.5rem;
    line-height:.8rem;
    font-size:.34rem;
    letter-spacing:1px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  ul.invalid li .right .date {
    text-align: center;
    color: #efefef;
    letter-spacing:1px;
    font-size:.28rem;
  }
  .v-spinner {
    position: fixed;
    top:0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    background: #fff;
    display: flex;
    flex: 0 1 auto;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
  }


  .notfound {
    width: 100%;
    text-align: center;
    font-size:.5rem;
    margin-top:3rem;
  }
</style>
